<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/a4.css" rel="stylesheet">
  </head>
  <body>
    <div class="page">
      <div class="container text-center english">
        <div class="row row-cols-4">
          <div class="col">
            <div class="english-word">
              <div class="phonetic_symbol">/ˈsʌbdʒɪkt/</div>
              <div class="rule">Subject</div>
              <div class="chinese">科目</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        var words = [
          {word: 'subject', chinese: '科目', phonetic_symbol: '/ˈsʌbdʒɪkt/', not_display: ['word', 'chinese']},
          {word: 'music', chinese: '音乐', phonetic_symbol: '/ˈmjuːsɪk/', not_display: ['word', 'chinese']},
          {word: 'science', chinese: '科学', phonetic_symbol: '/sɪˈnsiːs/', not_display: ['word', 'chinese']},
          {word: 'calligraphy', chinese: '书法', phonetic_symbol: '/kællɪɡrəfi/', not_display: ['word', 'chinese']},
          {word: 'best', chinese: '最好', phonetic_symbol: '/bɪst/', not_display: ['word', 'chinese']},
          {word: 'beautiful', chinese: '美丽的', phonetic_symbol: '/bɪst/', not_display: ['word', 'chinese']},
          {word: 'Matchs', chinese: '匹配', phonetic_symbol: '/məˈtʃs/', not_display: ['word', 'chinese']},
          {word: 'PE', chinese: '体育', phonetic_symbol: '/pɪ/', not_display: ['word', 'chinese']},
          {word: 'English', chinese: '英语', phonetic_symbol: '/ɪŋglɪs/', not_display: ['word', 'chinese']},
        ];
        
        var html = '';
        for (var i = 0; i < words.length; i++) {
          var word = '&nbsp;', 
            chinese = '&nbsp;',
            phonetic_symbol = '';

          if (typeof words[i].not_display == 'undefined' || words[i].not_display.indexOf('word') == -1) {
            word = words[i].word;
          }
          if (typeof words[i].not_display == 'undefined' || words[i].not_display.indexOf('chinese') == -1) {
            chinese = words[i].chinese;
          }
          if (typeof words[i].not_display == 'undefined' || words[i].not_display.indexOf('phonetic_symbol') == -1) {
            phonetic_symbol = words[i].phonetic_symbol;
          }
          alert(phonetic_symbol);

          html += '<div class="col">';
          html += '<div class="english-word">';
          html += '<div class="phonetic_symbol">' +  phonetic_symbol + '</div>';
          html += '<div class="rule">' + word + '</div>';
          html += '<div class="chinese">' + chinese + '</div>';
          html += '</div>';
          html += '</div>';
        }
        $('.english .row').html(html);
      });
    </script>
  </body>
</html>